<div>
	<div class="breadcrumb">
		<a class="prev" onclick="history.go(-1)"></a>
		<a class="next" onclick="history.go(1)"></a>
		<span *ngIf="!id">{{'guide.addGuide'|translate}}</span>
		<span *ngIf="id">{{'guide.editGuide'|translate}}</span>
	</div>
	<div class="tab-title">
		{{'guide.addTitle1'|translate}}
	</div>
	<form nz-form [formGroup]="validateForm" class="tour-form">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="name">{{'guide.name'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'placeholder.input'|translate}}{{'guide.name'|translate}}" id="name" name="name" formControlName="name" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="travelAgencyId">{{'guide.agencyName'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select style="width: 100%" id="travelAgencyId" name="travelAgencyId" formControlName="travelAgencyId">
							<nz-option *ngFor="let i of travelAgencyList" [nzLabel]="i.name" [nzValue]="i.id"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="12">
				<nz-form-item nzFlex>
					<nz-form-label style="width: 150px;" nzFor="birthday">{{'guide.birthday'|translate}}</nz-form-label>
					<nz-form-control>
                        <nz-date-picker  formControlName="birthday"></nz-date-picker>
					</nz-form-control>
				</nz-form-item>
			</div>
			<!-- <div nz-col [nzSpan]="12">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="mobile">服务分类项</nz-form-label>
					<nz-form-control>
						<nz-select
						[nzMaxTagCount]="8"
						[nzMaxTagPlaceholder]="tagPlaceHolder"
						nzMode="multiple"
						nzPlaceHolder="请选择机构的分类项"
						formControlName="cateIds"
						>
							<nz-option *ngFor="let option of classifyList" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
						</nz-select>
						<ng-template #tagPlaceHolder let-selectedList> 还有{{ selectedList.length }}个选项 </ng-template>
					</nz-form-control>
				</nz-form-item>
			</div> -->
		</div>
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="20">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired>{{'guide.time'|translate}}</nz-form-label>
					<nz-form-control>
						<clain-week-time formControlName="time"></clain-week-time>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
		<div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24">
                <nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="name">{{'guide.header'|translate}}<span>{{'guide.addtext1'|translate}}</span></nz-form-label>
					<nz-form-control>
						<clain-header-cropper formControlName="header" [clainWidth]="'150px'"></clain-header-cropper>
                    </nz-form-control>
                </nz-form-item>
            </div>
		</div>
		<div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24">
                <nz-form-item nzFlex>
                    <nz-form-label nzRequired nzFor="name">{{'guide.images'|translate}}<span>{{'guide.addtext2'|translate}}</span></nz-form-label>
                    <nz-form-control style="padding-bottom: 50px;">
                        <nz-upload
                            nzAccept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                            [nzAction]="uploadUrl"
                            nzListType="picture-card"
                            [(nzFileList)]="fileList"
                            [nzShowUploadList]="true"
							[nzPreview]="handlePreview"
							[nzBeforeUpload]="beforeUpload"
                            nzName="image"
                            (nzChange)="change($event)"
                        >
                            <i nz-icon nzType="plus"></i>
                            <div class="ant-upload-text">{{'upload'|translate}}</div>
                        </nz-upload>
                    </nz-form-control>
                </nz-form-item>
            </div>
		</div>
		<div class="tab-title">
			{{'guide.addTitle2'|translate}}
		</div>
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="reservationFee">{{'guide.reservationFee'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-input-group [nzSuffix]="suffixTemplate">
							<input nz-input placeholder="{{'placeholder.input'|translate}}{{'guide.reservationFee'|translate}}" formControlName="reservationFee" />
						</nz-input-group>
						<ng-template #suffixTemplate>{{'unit'|translate}}</ng-template>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="12">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="name">{{'guide.personalityTag'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select nzMode="tags" style="width: 100%;" [nzFilterOption]="filterOption" [nzShowArrow]="false" nzPlaceHolder="{{'placeholder.tags'|translate}}" formControlName="personalityTagList" (ngModelChange)="changePersonalityTag($event)">
						</nz-select>
                        <div style="line-height: 30px;">
                            <nz-tag nzMode="checkable" *ngFor="let item of personalityTagList" [nzChecked]="personalityTagObj[item.name]" (nzCheckedChange)="personalityTagChange($event,item)">{{item.name}} +</nz-tag>
                        </div>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="12">
				<nz-form-item nzFlex>
					<nz-form-label style="width: 120px;" nzRequired nzFor="name">{{'guide.guideServiceItem'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select nzMode="tags" style="width: 100%;" [nzFilterOption]="filterOption" [nzShowArrow]="false" nzPlaceHolder="{{'placeholder.tags'|translate}}" formControlName="guideServiceItemList" (ngModelChange)="changeGuideService($event)">
						</nz-select>
                        <div style="line-height: 30px;">
                            <nz-tag nzMode="checkable" *ngFor="let item of guideServiceItemList" [nzChecked]="guideServiceItemObj[item.name]" (nzCheckedChange)="guideServiceItemChange($event,item)">{{item.name}} +</nz-tag>
                        </div>
					</nz-form-control>
				</nz-form-item>
			</div>
        </div>
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="14">
                <nz-form-item nzFlex>
                    <nz-form-label style="width: 120px;" nzRequired nzFor="name">{{'guide.brief'|translate}}</nz-form-label>
                    <nz-form-control>
                        <textarea rows="6" maxlength="200" placeholder="{{'placeholder.textarea'|translate}}" formControlName="brief" nz-input></textarea>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div class="cz">
            <a class="submit-btn" (click)="submit()">{{'cz.submit'|translate}}</a>
            <a class="default-btn" routerLink="/basicSetting/guideMgmt">{{'cz.cancel'|translate}}</a>
        </div>
	</form>
</div>
